<template>
  <div class="app-container">
    <div class="block">
      <div class="title">老人详情</div>
      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            名称
          </template>
          张三
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            年龄
          </template>
          46
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            性别
          </template>
          男
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            联系方式
          </template>
          137****8980
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-phone"></i>
            证件号
          </template>
          3307********8980
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            联系人
          </template>
          李响
        </el-descriptions-item>
      </el-descriptions>

      <div class="title">老人档案</div>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="健康档案" name="first">
          <el-card shadow="always" style="margin:10px">
            <div slot="header" class="clearfix">
              <span>健康检查记录</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >新增</el-button
              >
            </div>
            <el-table
              :data="tabledata"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <el-table-column
                label="检测项目"
                prop="jiance_name"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="检测结果"
                prop="result"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="检测时间"
                prop="dis_time"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="上传时间"
                prop="time"
                min-width="140px"
                align="center"
              >
              </el-table-column>
            </el-table>
          </el-card>
          <el-card shadow="always" style="margin:10px">
            <div slot="header" class="clearfix">
              <span>疾病诊断与治疗</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >新增</el-button
              >
            </div>
            <el-table
              :data="tabledata"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <el-table-column
                label="诊断结果"
                prop="disease_name"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="治疗方案"
                prop="treatment"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="诊断单位"
                prop="hospital"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="诊断时间"
                prop="time"
                min-width="140px"
                align="center"
              >
              </el-table-column>
            </el-table>
          </el-card>
          <el-card shadow="always" style="margin:10px">
            <div slot="header" class="clearfix">
              <span>健康监测数据</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >新增</el-button
              >
            </div>
            <el-table
              :data="tabledata"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <el-table-column
                label="监测项目"
                prop="pro_name"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="当前监测结果"
                prop="pro_result"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="上报时间"
                prop="time"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                prop="pro_result"
                min-width="140px"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button type="text">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <el-card shadow="always" style="margin:10px">
            <div slot="header" class="clearfix">
              <span>健康风险评估报告</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >新增</el-button
              >
            </div>
            <el-table
              :data="tabledata"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <el-table-column
                label="疾病种类"
                prop="dis_name"
                width="120px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="评估结果"
                prop="dis_result"
                min-width="250px"
                align="center"
                v-if="isEdit == false"
              >
                <template slot-scope="scope">
                  <span v-if="check1" style="margin:0 20px"
                    >发病风险: {{ value1 }}</span
                  >
                  <span v-if="check2">死亡风险: {{ value2 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="评估结果"
                prop="dis_result"
                min-width="250px"
                align="center"
                v-else-if="isEdit == true"
              >
                <template slot-scope="scope">
                  <el-checkbox label="发病风险" v-model="check1"> </el-checkbox
                  ><el-input
                    v-model="value1"
                    style="width:160px;margin-right: 10px"
                  ></el-input>
                  <el-checkbox label="死亡风险" v-model="check2"></el-checkbox>
                  <el-input
                    v-model="value2"
                    style="width:160px;margin-right: 10px"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="评估报告"
                prop="time"
                width="140px"
                align="center"
              >
                <template>
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    :file-list="fileList"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </template>
              </el-table-column>
              <el-table-column
                label="修改时间"
                prop="time"
                width="180px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                prop="pro_result"
                width="100px"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    v-if="isEdit == false"
                    @click="isEdit = true"
                    >修改</el-button
                  >
                  <el-button type="text" v-else @click="isEdit = false"
                    >保存</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="服务档案" name="second">
          <el-card shadow="always" style="margin:10px">
            <div slot="header" class="clearfix">
              <span>日常生活记录</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >新增</el-button
              >
            </div>
            <el-table
              :data="tabledata"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <el-table-column
                label="报告名称"
                prop="name"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="上传时间"
                prop="time"
                min-width="140px"
                align="center"
              >
              </el-table-column>
            </el-table>
          </el-card>
          <el-card shadow="always" style="margin:10px">
            <div slot="header" class="clearfix">
              <span>护理记录</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >新增</el-button
              >
            </div>
            <el-table
              :data="tabledata"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <el-table-column
                label="报告名称"
                prop="name"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="上传时间"
                prop="time"
                min-width="140px"
                align="center"
              >
              </el-table-column>
            </el-table>
          </el-card>
          <el-card shadow="always" style="margin:10px">
            <div slot="header" class="clearfix">
              <span>娱乐与社交活动</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >新增</el-button
              >
            </div>
            <el-table
              :data="tabledata"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <el-table-column
                label="报告名称"
                prop="name"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="上传时间"
                prop="time"
                min-width="140px"
                align="center"
              >
              </el-table-column>
            </el-table>
          </el-card>
          <el-card shadow="always" style="margin:10px">
            <div slot="header" class="clearfix">
              <span>服务质量评价</span>
            </div>
            <el-table
              :data="tabledata"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <el-table-column
                label="日期"
                prop="date"
                width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="评价项目"
                prop="project"
                width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="分值（1分：非常不满意；2分：不满意；3分：一般；4分：满意；5分：非常满意）"
                prop="score"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="意见"
                prop="remark"
                min-width="160px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="上传时间"
                prop="time"
                width="160px"
                align="center"
              >
              </el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>

        <el-tab-pane label="财务档案" name="fourth">
          <el-card shadow="always" style="margin:10px">
            <div slot="header" class="clearfix">
              <span>费用收支记录</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >新增</el-button
              >
            </div>
            <el-table
              :data="tabledata"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <el-table-column
                label="日期"
                prop="date"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="缴费项目"
                prop="project"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="金额"
                prop="price"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="收款人"
                prop="user"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="备注"
                prop="pro_remark"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="修改时间"
                prop="time"
                min-width="140px"
                align="center"
              >
              </el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="其他档案" name="five">
          <el-card shadow="always" style="margin:10px">
            <div slot="header" class="clearfix">
              <span>能力评估档案</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >新增</el-button
              >
            </div>
            <el-table
              :data="tabledata"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <el-table-column
                label="报告名称"
                prop="name"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="上传时间"
                prop="time"
                min-width="140px"
                align="center"
              >
              </el-table-column>
            </el-table>
          </el-card>
          <el-card shadow="always" style="margin:10px">
            <div slot="header" class="clearfix">
              <span>心理咨询档案</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >新增</el-button
              >
            </div>
            <el-table
              :data="tabledata"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <el-table-column
                label="报告名称"
                prop="name"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="上传时间"
                prop="time"
                min-width="140px"
                align="center"
              >
              </el-table-column>
            </el-table>
          </el-card>
          <el-card shadow="always" style="margin:10px">
            <div slot="header" class="clearfix">
              <span>离院档案</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >新增</el-button
              >
            </div>
            <el-table
              :data="tabledata"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <el-table-column
                label="报告名称"
                prop="name"
                min-width="140px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="上传时间"
                prop="time"
                min-width="140px"
                align="center"
              >
              </el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
      tabledata: [
        {
          jiance_name: "血常规",
          name: "体检报告",
          time: "2023-12-24 16:10:10",
          dis_time: "2023-12-24 16:10:10",
          disease_name: "胃炎",
          dis_name: "冠心病",
          dis_result: "",
          treatment: "饮食注意",
          hospital: "人民医院",
          result: "正常",
          pro_name: "心率",
          pro_result: "88次/分",
          status: "正常",
          id: "2104623",
          date: "2023-12-24",
          project: "助行",
          score: "3分",
          remark: "专业素养有待提高",
          price: "300元",
          user: "杜萨"
        },
        {
          jiance_name: "血糖",
          name: "医疗记录",
          time: "2023-12-24 16:10:10",
          dis_time: "2023-12-24 16:10:10",
          disease_name: "胰腺炎",
          dis_name: "糖尿病",
          treatment: "建议手术",
          hospital: "浙二医院",
          result: "正常",
          pro_name: "血压",
          pro_result: "80/120",
          status: "正常",
          id: "2104623",
          date: "2023-12-24",
          project: "助行",
          score: "4分",
          remark: "专业素养有待提高",
          price: "300元",
          user: "杜萨"
        }
      ],
      checkList: ["发病风险"],
      isEdit: false,
      check1: true,
      check2: true,
      value1: "有概率发病",
      value2: "有概率死亡",
      status: "1",
      afterSalesLine: [
        {
          date: "2023-7-21",
          detail: "保养智能防走失装置",
          consPersonnel: "李响"
        }
      ]
    };
  },
  methods: {
    handleClick() {}
  }
};
</script>
<style scoped lang="scss">
.title {
  margin: 20px 0;
  font-weight: 600;
}
.operate {
  float: right;
  margin: 10px 0;
  .el-button {
    margin-right: 10px;
  }
}
.el-steps {
  clear: both;
}
.ability-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  .logo {
    width: 24px;
    height: 24px;
    // margin: 0 10px 0 0;
  }
  .donelogo {
    width: 44px;
    height: 44px;
  }
  //   span {
  //     margin-bottom: 10px;
  //   }
}
.user-container {
  color: #373737 !important;
}
.el-checkbox {
  margin-right: 12px !important;
}
</style>
